<template>
  <div>
    <div class="h-96"></div>
    <div class="ceshi text-base">测试</div>
    <div class="tab_change">
      <div class="bgs"></div>
      <div class="bgs_active">
        <div class="num text-white bg-theme px-3 rounded-lg">0{{ activeIndex + 1 }}</div>
        <div class="border"></div>
        <div class="tbox"></div>
      </div>
      <div class="relative z-10">
        <div
          v-for="(item, index) in 3"
          :key="item"
          class="tab_item"
          @click="() => tabChange(index)"
          @mouseenter="() => itemMouseEnter(index)"
          @mouseleave="() => itemMouseLeave(index)"
          ref="itemRef"
          :class="
            $cn({
              item_active: index === activeIndex,
            })
          "
        >
          <div class="tbox">
            <div class="text subtitle">
              <span>地基构建</span>
              <span>地基构建</span>
            </div>
            <div class="title">
              <span class="line-clamp-1"
                >升级与转化率相关的所有配套升级与转化率相关的所有配套升级与转化率相关的所有配套</span
              >
              <span class="line-clamp-1"
                >升级与转化率相关的所有配套升级与转化率相关的所有配套升级与转化率相关的所有配套</span
              >
            </div>
            <div class="desc">
              我们为客户提供数字化基建服务，涵盖企业官网建设、品牌数字化建设，以及Web/APP/小程序的设计与开发。
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref, useTemplateRef } from "vue";

const itemEl = useTemplateRef<HTMLDivElement[]>("itemRef");
const maskTop = ref("100px");
const maskOpacity = ref(0);
const maskHeight = ref("px");
const maskHIndex = ref(-1);
const activeIndex = ref(0);
const bgsHeight = ref("0px");
const bgsTop = ref("0px");
const tabChange = (index: number) => {
  activeIndex.value = index;
  setTimeout(() => {
    bgsHeight.value = itemEl.value![index].offsetHeight + "px";
    bgsTop.value = itemEl.value![index].offsetTop + "px";
    if (maskHIndex.value === activeIndex.value) {
      //   maskOpacity.value = 0;
    }
  }, 0);
};
let isLeave = true;
const itemMouseEnter = (index: number) => {
  const els = (itemEl.value as unknown) as HTMLDivElement[];
  let offsetTop = els[index].offsetTop;
  maskTop.value = offsetTop + "px";
  maskOpacity.value = 1;
  maskHeight.value = els[index].offsetHeight + "px";
  isLeave = false;
  maskHIndex.value = index;
  if (activeIndex.value == index) {
    // maskOpacity.value = 0;
  }
};
let timerLeave: any = null;
const itemMouseLeave = (index: number) => {
  //   maskTop.value = "0px";
  //   maskOpacity.value = 0;
  if (timerLeave) {
    clearTimeout(timerLeave);
    timerLeave = null;
  }
  isLeave = true;
  timerLeave = setTimeout(() => {
    if (maskOpacity.value === 1 && isLeave) {
      maskTop.value = "0px";
      maskOpacity.value = 0;
      maskHIndex.value = -1;
    }
  }, 200);
};

onMounted(() => {
  if (window) {
    maskHeight.value = ((itemEl.value![2] as unknown) as HTMLElement).offsetHeight + "px";
    bgsHeight.value = ((itemEl.value![0] as unknown) as HTMLElement).offsetHeight + "px";
  }
});
</script>
<style lang="scss" scoped>
.ceshi {
  @apply text-theme;
}
.tab_change {
  width: 50%;
  margin: 0 auto;
  position: relative;

  .bgs {
    background-color: #f5f7f9;
    width: 100%;
    border-radius: 10px;
    height: v-bind(maskHeight);
    position: absolute;
    opacity: v-bind(maskOpacity);
    top: v-bind(maskTop);
    transition: all 0.5s;
    pointer-events: none;
    z-index: 1;
  }
  .bgs_active {
    border: 1px solid #f5f7f9;
    height: v-bind(bgsHeight);
    background-color: white;
    border-radius: 10px;
    position: absolute;
    pointer-events: none;
    width: 100%;
    top: v-bind(bgsTop);
    transition: all 0.5s;
    z-index: 5;
    box-shadow: 0 0 10px rgb(233, 233, 233);
    .border {
      width: 8px;
      left: -8px;
      height: 50%;
      top: 25%;
      position: absolute;
      border-top-left-radius: 10px;
      border-bottom-left-radius: 10px;
      box-shadow: 0.3rem 0 2rem 0 rgba(235, 62, 62, 0.8);
      @apply bg-theme;
    }
    .num {
      position: absolute;
      top: 1rem;
      right: 1rem;
    }
  }
  .tab_item {
    cursor: pointer;
    z-index: 5;
    padding: 1.4rem 2rem;
    margin-bottom: 1.4rem;
    .subtitle {
      height: 1.6rem;
      overflow: hidden;
      color: grey;
      span {
        display: block;
        transition: all 0.5s;
        &:nth-child(2) {
          @apply text-theme;
        }
      }
    }

    .title {
      height: 3rem;
      overflow: hidden;
      color: grey;
      font-size: 2rem;
      span {
        width: 100%;
        transition: all 0.5s;
        // display: -webkit-box;
        // -webkit-box-orient: vertical;
        // -webkit-line-clamp: 1;
        &:nth-child(2) {
          @apply text-theme;
        }
      }
    }
    .desc {
      display: none;
      opacity: 0;
    }
    &.item_active {
      .subtitle,
      .title {
        span {
          transform: translateY(-100%);
        }
      }
      .desc {
        display: block;
        opacity: 1;
      }
    }
  }
}
</style>
